import React, { memo, useCallback } from 'react';
import { useSelector, shallowEqual, useDispatch } from "react-redux";

import {
    getSizeImage,
    formatMinuteSecond
} from "@/utils/format-utils.js"
import { getSongDetailAction } from '@/pages/player/store/actionCreators';

import CJXThemeHeaderSong from '@/components/theme-header-song';
import {
    RankingListWrapper
} from './style';
import { NavLink } from 'react-router-dom';



export default memo(function CJXRankingPlayList() {
    const { playListDetail } = useSelector(state => ({
        playListDetail: state.getIn(["ranking", "playListDetail"])
    }), shallowEqual);
    const tracks = playListDetail.tracks || [];

    const dispatch = useDispatch();

    const playMusic = useCallback((item) => {
        // console.log(item.id);
        dispatch(getSongDetailAction(item.id));

    }, [dispatch]);

    return (
        <RankingListWrapper>
            <CJXThemeHeaderSong />
            <div className="play-list">
                <table>
                    <thead>
                        <tr className="header">
                            <th className="ranking"></th>
                            <th className="title">标题</th>
                            <th className="duration">时长</th>
                            <th className="singer">歌手</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            tracks.map((item, index) => {
                                return (
                                    <tr className="" key={item.id}>
                                        <td>
                                            <div className="rank-num">
                                                <span className="num">{index + 1}</span>
                                                <span className="new sprite_icon2"></span>
                                            </div>
                                        </td>
                                        <td>
                                            <div className="song-name">
                                                {
                                                    index < 3 ?
                                                        (<NavLink to={{
                                                            pathname: "/discover/player",
                                                            state: {id: item.id},
                                                            search: "?id="+item.id
                                                        }}>
                                                            <img src={getSizeImage(item.al && item.al.picUrl, 50)} alt="" /> 
                                                        </NavLink>) : null
                                                        
                                                }
                                                <span className="play sprite_table" onClick={e => playMusic(item)}></span>
                                                <NavLink to={{
                                                        pathname: "/discover/player",
                                                        state: {id: item.id},
                                                        search: "?id="+item.id
                                                    }} className="name">
                                                    {item.name}
                                                </NavLink>
                                                {/* <span className="name"></span> */}
                                            </div>
                                        </td>
                                        <td>{formatMinuteSecond(item.dt)}</td>
                                        <td>{item.ar[0].name}</td>
                                    </tr>
                                )
                            })
                        }
                    </tbody>
                </table>
            </div>
        </RankingListWrapper>
    )
})

